<template>
	<div class="home-screen-module4">
		<div class="card" v-for="(item,index) in dataSource" :key="'card-item-'+index" :style="{backgroundColor:item.iibraryColour}">
			<div class="number">{{item.iibraryNumber}}</div>
			<div class="name">{{item.iibraryState}}</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	dataSource:{
		type:Array,
		default:function(){
			return []
		}
	}
})
</script>

<style lang="scss" scoped>
.home-screen-module4{
	display: flex;
	box-sizing: border-box;
	flex-wrap: wrap;
	padding: .14em 0 0 .14em;
	&>.card{
		color: #fff;
		border-radius: .03em;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: .14em;
		margin-right: .14em;
		width: 1.455em;
		height: .8em;
		&>.number{
			font-size:.3em;
		}
		&>.name{
			padding-top: .1em;
			font-size:.18em;
		}
	}
}
</style>